<!DOCTYPE html>
<html>
<head>
	<title>Animation</title>
	<style type="text/css">
		#foo {
			width: 120px;
			height: 120px;
			background-color: red;
			border-radius: 4px;
			animation: anima  8s cubic-bezier(0.54, -0.62, 1, -0.04) infinite;
			transition: border ease .2s;
			cursor: pointer;
		}
		#foo:hover {
			box-shadow: 0 0 16px  rgba(6, 255, 34, 0.8);
		}
		@keyframes  anima {
			0% {
				opacity: 0.1;
				transform: translateX(0);
			}
			50% {
				opacity: 1;
				transform: translateX(500px);
			}
			100% {
				opacity:  0.1;
				transform: translateX(0);
			}
		}
	</style>
</head>
<body>
	<div id="foo"></div>
	<script type="text/javascript" src="./AlloyTouch.js"></script>
</body>
</html>